<template>
  <div class="file-uploader pt-6 pb-15 px-lg-17">
    <!--begin::Input group-->

    <el-upload
      class="upload-container"
      drag
      action=""
      :http-request="handleUpload"
      :before-upload="beforeUpload"
      :on-preview="handlePreview"
      :on-success="onSuccess"
      :show-file-list="false"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div
        slot="tip"
        class="el-upload__tip"
      >文件大小不能超过20MB</div>
    </el-upload>

    <div
      v-for="(item, index) in fileList"
      :key="index"
      class="file-list"
    >
      <div
        class="file-item"
        @mouseover="item.hover = true"
        @mouseleave="item.hover = false"
      >
        <div class="file-summary">
          <div class="d-flex">
            <div class="file-type-image">
              <img
                :src="item.url"
                height="24"
                width="24"
              >
            </div>
            <div class="d-flex flex-column">
              <span class="text-gray-700 fs-7">{{ item.name }} </span>
              <span class="text-gray-400 fs-8">{{ item.size }}</span>
            </div>
          </div>
          <div
            v-if="!item.hover"
            class="file-status"
          >
            <img
              v-if="item.finish && item.status"
              class="file-status-img"
              src=""
            >
            <img
              v-if="item.finish && !item.status"
              class="file-status-img"
              src=""
            >
          </div>
          <div
            v-else
            class="file-status"
          >
            <img
              class="file-status-img close"
              src=""
              @click="remove(index)"
            >
          </div>
        </div>
        <el-progress
          :percentage="item.progress"
          :color="item.progressColor"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { uploadAttachment } from '@/api/attachment/attachment'
import { getThumbnail } from '@/const/attachmentConst'
import { formatAttachmentSize } from '@/utils/utils'
export default {
  name: 'FileUploader',
  props: {
    folderId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      uploadPercent: 0,
      fileList: []
    }
  },
  methods: {
    handleUpload(data, fileList) {
      this.uploadFile(data.file, fileList)
    },
    handlePreview(file) {
    },
    onSuccess() {

    },
    beforeUpload(file) {
      const extension = file.name.split('.').pop()
      this.fileList.push({
        name: file.name,
        url: getThumbnail(extension),
        size: formatAttachmentSize(file.size),
        progress: 0,
        progressColor: '#409eff',
        hover: false,
        finish: false,
        status: false
      })
    },
    uploadFile(data, fileList) {
      const file = new window.File([data], data.name, { type: data.type })
      const currentFile = this.fileList.slice(-1)[0]
      var formData = new FormData()
      formData.append('file', file)
      formData.append('folderId', this.folderId)
      uploadAttachment(formData, progressEvent => {
        currentFile.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
      }).then(res => {
        currentFile.status = true
        currentFile.finish = true
        currentFile.progressColor = '#5cb87a'
        this.$emit('success')
        this.$message({
          message: '上传成功',
          type: 'success'
        })
      }).catch(err => {
        currentFile.status = false
        currentFile.finish = true
        currentFile.progressColor = '#f56c6c'
        console.log(err)
      })
    },
    remove(idx) {
      this.fileList.splice(idx, 1)
    }

  }
}
</script>
<style lang="scss" scoped>
.file-uploader {

    .upload-container {
        width: 100%;
    }

    .file-item {
        border: 1px solid var(--bs-gray-300);
        border-radius: 4px;
        padding: 14px 12px;
        margin-top: 12px;

        .file-summary {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;

            .file-type-image {
                border: 1px solid var(--bs-border-color);
                border-radius: 4px;
                padding: 6px;
                margin-right: 6px;
            }

            .file-status-img {
                position: relative;
                top: -10px;
                right: -5px;
                height: 24px;
                width: 24px;
            }

            .close {
                height: 18px;
                width: 18px;
                cursor: pointer;
            }
        }

    }

    ::v-deep {
        .el-upload {
            width: 100%;

            .el-upload-dragger {
                width: 100%;
            }
        }
    }
}
</style>
